<template>

    <div class="cinamsFilm">
        <div class="h" style="margin-top: 10px;margin-left: 5px;">
            <img @click="toCinemas" src="../assets/zzt.png" alt="" style="width: 28px;height: 28px;">
        </div>
        <div class="text" style="text-align: center;margin-top: 20px;">
            {{ name}}
        </div>
        <div class="pop" style="text-align: center;margin-top: 20px;">
         
            <span style="margin-right: 10px;height: 18px;color: #ffb232;display: inline-block;
                    font-size: 10px;" 
                v-for="item in services" :key="item">{{ item.name }}</span>
        </div>

        <div class="address" style="display: flex;justify-content: space-between;align-items: center; margin: 20px 20px 10px 20px;position: relative;">
            <img src="../assets/dw.png" alt="" style="width: 14px;height: 21px;">
            <span style="position:absolute ; top: 0;left: 30px;font-size: 14px;">{{ address }}</span>
            <img src="../assets/dh.png" alt="" style="width:17px;height: 18px;">
        </div>

        <!-- 影片图片 -->
        <div class="swpie" style="position: relative;">
            <van-swipe  :autoplay="3000" indicator-color="white" :show-indicators="false">
            <van-swipe-item style="float: left;white-space: nowrap;display: flex;overflow-x: auto;">
                    <template v-for="(item, index) in images">    
                    <div :key="index" v-if="index <= images.length">       
                      <img :src="item" style="width: 90px;height: 130px;margin-top: 20px;
                         margin-right: 20px;"/>
                    </div>
                  </template>
            </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>


<script setup>
import { onMounted,ref } from 'vue';
import router from '../router';
import listStore  from '../store';
const store = listStore()

const name = ref()
const address = ref()
const services = ref()
const images = ref([])  //所有影片图片列表

const selectedMovie = ref(null)


onMounted(async()=>{
    store.bottom = false

    // 调用请求获取影院名称和其他信息
    console.log(store.cinemaId);
  await  store.getCinemasFilm(store.cinemaId)
    name.value = store.cinemaFilmData.name
    address.value = store.cinemaFilmData.address
    services.value = store.cinemaFilmData.services

    // 获取用户点击影院的影院中的影片详细信息
   await store.getCinemasFilmList(store.cinemaId)

   store.cinemaFilmLists.forEach(item => {
    images.value.push(item.poster)
   });

   console.log(images.value);

})

// 点击影片回调
// const centerMovie = ((index)=>{
//     selectedMovie.value = index
// })

// 点击左上方箭头回调
const toCinemas = (()=>{
    router.push("/cinemas")
})

</script>


<style scoped>
.pop span {
    bottom: 1px solid #ffb232 !important;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }



</style>